<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
.red{color:red;}
.orange{color:orange;}
.yellow{color:yellow;}
</style>
</head>
<body>
<div id="myApp">
<h3>v-on 事件绑定</h3>
<button v-on:click="clickBtn()">点击事件</button>
<h3>v-on 事件缩写</h3>
<button @click="clickBtn()">点击事件</button>
<br><br>
{{message}}
<h3>v-on 点击事件</h3>
<button v-on:click="countClick()">点击增加</button><br><br>
我被点击了{{count}}次。
<h3>事件修饰符：</h3>
<p>Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。</p>
<p>Vue.js通过由点(.)表示的指令后缀来调用修饰符。</p>
.stop<br>
.prevent<br>
.capture<br>
.self<br>
.once<br>
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis">阻止单击事件冒泡 v-on:click.stop="doThis"</a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit">提交事件不再重载页面 v-on:submit.prevent="onSubmit"</form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat">修饰符可以串联 v-on:click.stop.prevent="doThat"</a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent>只有修饰符 v-on:submit.prevent</form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">添加事件侦听器时使用事件捕获模式 v-on:click.capture="doThis"</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">只当事件在该元素本身（而不是子元素）触发时触发回调  v-on:click.self="doThat"</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis">事件只能点击一次 v-on:click.once="doThis"</a>

</div>
<script type="text/javascript">
var myApp = new Vue({
	el:"#myApp",
	data:{
		count:0,
		message:'hello world!',
		onOff:true, 
	},
	methods:{
		clickBtn:function(){
			// 进行翻转
			this.message = this.message.split('').reverse().join('');
		},
		countClick:function(){
			this.count++;
		}
	}
});
</script>
</body>
</html>